{% extends "base.html" %} {% block title %}首页{% endblock %} {% load staticfiles %} {% block content %}
<div class="admin">
    <div class="listbiaoti" style="margin: 15px 15px 0px 17px; width: 98%; background-color: #ffffff">
        <ul> 人员统计</ul>
        <dl style="float: right;"> 当前位置： Jira数据统计 >
            <a href="#">人员统计</a>
        </dl>
    </div>
    <!-- <div style="margin: 0px 15px 0px 17px; background-color: #ffffff">
        <label style="margin: 10px 0 0 10px">请输入检索时间:</label>
        <input style="margin: 10px 0 0 10px; width: 20%" type="text" id="datepicker" class="form-control" placeholder="开始时间" required>
        <input style="margin: 10px 0 0 10px; width: 20%" type="text" id="datepicker" class="form-control" placeholder="结束时间" required>
        <button id="searchButton" class="btn btn-primary" style="margin: 10px 0 0 10px; width: 80px">检索</button>
    </div> -->
    <div class="col-lg-6 input-group" style="margin: 0px 15px 0px 17px; width: 98%; background-color: #ffffff">
        <h3 style="margin: 10px 0 0 10px">
            请选择项目版本：
            <select class="selectpicker" data-width="20%">
                <option disabled selected = "selected" >请选择想要查询的版本</option>
                {% for version in versions %}
                    <option>{{version.name}}</option>
                {% endfor %}
            </select>
            <button class="btn btn-default" id="btn-search" type="button">
                搜索
            </button>
        </h3>
    </div>
    <ul id="myTab" class="nav nav-tabs" style="margin: 0px 15px 0px 17px; padding: 10px 0 0 10px; width: 98%; background-color: #ffffff">
        <li class="active">
            <a href="#develop" data-toggle="tab">开发数据</a>
        </li>
        <li>
            <a href="#test" data-toggle="tab">测试数据</a>
        </li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active container" id="develop" style="width: 98%; background-color: #ffffff">
            <table class="table table-bordered col-lg-5" style="width: 100%; height: 100%; margin: 15px auto">
                <!-- <caption>BUG数据统计</caption> -->
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>数据内容</th>
                        <th>BUG分布</th>
                        <th>备注</th>
                </thead>
                <tbody>
                    {% for developer in developerdata %}
                        <tr>
                            <td>{{developer.name}}</td>
                            <td>
                                <table class="table table-striped" style="width: 100%; height: 60%;">
                                    <thead>
                                        <tr>
                                            <th>BUG模块</th>
                                            <th>BUG数量</th>
                                        </tr>
                                    </thead>
                                    <tbody class='developer-bug'>
                                        {% for attribute in developer.attributebug %}
                                            <tr>
                                                <td>{{attribute.field_name}}</td>
                                                <td>{{attribute.totalnum}}</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </td>
                            <td>
                                <div class="col-lg-5  pull-left bug-dev" style="width: 1000px; height: 400px; margin: 0 auto"></div>
                            </td>
                            <td>暂无</td>
                        </tr>
                        <tr>
                    {% endfor %}
            </table>
        </div>
        <div class="tab-pane fade container" id="test" style="width: 98%; background-color: #ffffff">
            <table class="table table-bordered col-lg-5" style="width: 100%; height: 100%; margin: 15px auto">
                <!-- <caption>BUG数据统计</caption> -->
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>数据内容</th>
                        <th>BUG分布</th>
                        <th>备注</th>
                </thead>
                <tbody>
                    {% for tester in testerdata %}
                        <tr>
                            <td>{{tester.name}}</td>
                            <td>
                                <table class="table table-striped" style="width: 100%; height: 60%;">
                                    <thead>
                                        <tr>
                                            <th>BUG模块</th>
                                            <th>BUG数量</th>
                                        </tr>
                                    </thead>
                                    <tbody class="tester-bug">
                                        {% for attribute in tester.attributebug %}
                                            <tr>
                                                <td>{{attribute.field_name}}</td>
                                                <td>{{attribute.totalnum}}</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </td>
                            <td>
                                <div class="col-lg-5  pull-left bug-test" style="width: 1000px; height: 400px; margin: 0 auto"></div>
                            </td>
                            <td>暂无</td>
                        </tr>
                        <tr>
                    {% endfor %}
            </table>
        </div>
    </div>
</div>
<script language="JavaScript">
    var developerdata = {{ developerdata|safe }};
    var testerdata = {{ testerdata|safe }};

    
    var jsondev = {};
    var jsonte = {};
    /*
    var devpic = [];
    var tepic = [];
    */

    function get_persondata(cla, data){
        /*
        传入数据，生成对应饼状图或者柱状图格式数据
        :param: cla: 'column'或者'pie'
        :param: data: 传入json格式数据
        :return: 返回对应格式数据
        */
        let newdata = []
        if (cla == 'column') {
            data.forEach((item) => {
                let va = new Array();
                va.push(item.totalnum)
                let val = {};
                val.name = item.field_name;
                val.data = va;
                newdata.push(val);
            });
        }
        else if (cla == 'pie'){
            data.forEach((item) => {
                let val = {};
                val.name = item.field_name;
                val.y = item.totalnum;
                newdata.push(val);
            });
        }
        return newdata
    };

    function update_persondata(persondata){

        for (let i = 0; i < persondata.developerdata.length; i ++){
            jsondev.series = get_persondata('column', persondata.developerdata[i].attributebug);
            $('.bug-dev').eq(i).highcharts(jsondev);
            devbug = '';
            persondata.developerdata[i].attributebug.forEach((item) => {
                devbug = devbug + "<tr><td>" + item.field_name + "</td><td>" + item.totalnum + "</td></tr>"
            });
            $('.developer-bug').eq(i).html(devbug);
        }

        for (let i = 0; i < persondata.testerdata.length; i ++){
            jsonte.series = get_persondata('column', persondata.testerdata[i].attributebug);
            $('.bug-test').eq(i).highcharts(jsonte);
            tebug = '';
            persondata.testerdata[i].attributebug.forEach((item) => {
                tebug = tebug + "<tr><td>" + item.field_name + "</td><td>" + item.totalnum + "</td></tr>"
            });
            $('.tester-bug').eq(i).html(tebug);
        }

    }

    $(document).ready(function () {
        for (let i = 0; i < developerdata.length; i ++){
            var chart = {
                type: 'column'
            };
            var title = {
                text: 'BUG数量统计'
            };
            var subtitle = {
                text: '数据来源: jira.jd.com'
            };
            var xAxis = {
                categories: [''],
                crosshair: true
            };
            var yAxis = {
                min: 0,
                title: {
                    text: '单位 (个)'
                }
            };
            var tooltip = {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.0f} 个</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            };
            var plotOptions = {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            };
            var credits = {
                enabled: false
            };

            var series = get_persondata('column', developerdata[i].attributebug)

            jsondev.chart = chart;
            jsondev.title = title;
            jsondev.subtitle = subtitle;
            jsondev.tooltip = tooltip;
            jsondev.xAxis = xAxis;
            jsondev.yAxis = yAxis;
            jsondev.series = series;
            jsondev.plotOptions = plotOptions;
            jsondev.credits = credits;
            $('.bug-dev').eq(i).highcharts(jsondev);
        };
    });

    $(document).ready(function () {
        for (let i = 0; i < testerdata.length; i ++){
            // 获取测试者BUG数据
            var tepic = new Array();
            testerdata[i].attributebug.forEach((item) => {
                let va = new Array();
                va.push(item.totalnum)
                let val = {};
                val.name = item.field_name;
                val.data = va;
                tepic.push(val);
            });
            var chart = {
                type: 'column'
            };
            var title = {
                text: 'BUG数量统计'
            };
            var subtitle = {
                text: '数据来源: jira.jd.com'
            };
            var xAxis = {
                categories: [''],
                crosshair: true
            };
            var yAxis = {
                min: 0,
                title: {
                    text: '单位 (个)'
                }
            };
            var tooltip = {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.0f} 个</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            };
            var plotOptions = {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            };
            var credits = {
                enabled: false
            };
    
            var series = get_persondata('column', testerdata[i].attributebug)
    
            jsonte.chart = chart;
            jsonte.title = title;
            jsonte.subtitle = subtitle;
            jsonte.tooltip = tooltip;
            jsonte.xAxis = xAxis;
            jsonte.yAxis = yAxis;
            jsonte.series = series;
            jsonte.plotOptions = plotOptions;
            jsonte.credits = credits;
            $('.bug-test').eq(i).highcharts(jsonte);
        };
    });

    $(function () {
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            // 获取已激活的标签页的名称
            var activeTab = $(e.target).text();
            // 获取前一个激活的标签页的名称
            var previousTab = $(e.relatedTarget).text();
            $(".active-tab span").html(activeTab);
            $(".previous-tab span").html(previousTab);
        });
    });

    /* $( function() {
        $( "#datepicker" ).datepicker();
    });
    */

    $('#btn-search').click(function(){
        var data = {
            version: $(".selectpicker").find("option:selected").text()
        }
        $.ajax({  
            type : 'post',
            url : "/api/jira_person/",
            contentType: "application/json",
            data: JSON.stringify(data),
            success : function(datas) {
                let alldata = JSON.parse(datas)
                update_persondata(alldata)
            },
            error: function () {
                myAlert('Sorry，服务器可能开小差啦, 请重试!');
            }
        });
    });
</script>

{% endblock %}